<template>
  <el-popover
    placement="bottom"
    trigger="manual"
    v-model="popoverVisible"
    ref="popover"
    @show="handlePopoverShow">

    <div slot="reference" class="bell">
      <i class="el-icon-bell" :style="{ color: color }" @click="popoverVisible = !popoverVisible"></i>
      <span class="dot" v-if="unReadList.length > 0"></span>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch style="width: 500px">
      <el-tab-pane :label="unReadLabel" name="unRead">
        <el-row :gutter="10" class="mb8" ref="refbut">
          <el-col :span="1.5">
            <el-button type="primary" plain  @click="handleSetRead">标记已读</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain  @click="handleAllRead">全部已读</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="unReadLoading" :data="unReadList" :show-header="false" style="overflow-y: auto" height="200" @selection-change="handleUnReadSelection" @row-click="rowClick">
          <el-table-column type="selection" width="55" align="center" style="height: 20px" prop="id"/>
          <el-table-column align="left" style="height: 20px">
            <template slot-scope="scope" >
              
              <p class="ellipsis" style="height: 20px" :title="scope.row.msg">{{ scope.row.msg }}</p>
              <p>{{scope.row.createTime}}</p>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="readLabel" name="read">
        <el-row :gutter="10" class="mb8" ref="refbut">
          <el-col :span="1.5">
            <el-button type="danger" plain  @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain  @click="handleAllDelete">全部删除</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="readLoading" :data="readList" :show-header="false" style="overflow-y: auto" height="200" @selection-change="handleReadSelection">
          <el-table-column type="selection" width="55" align="center" style="height: 20px" prop="id"/>
          <el-table-column align="left" style="height: 20px">
            <template slot-scope="scope" >
              <p class="ellipsis" style="height: 20px" :title="scope.row.msg">{{ scope.row.msg }}</p>
              <p>{{scope.row.createTime}}</p>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </el-popover>
</template>

<script>
import {deleteMsg, getMessageList, setAllRead, setRead, deleteAllMsg, updateApproveNoticeData,} from "@/api/message";
import {getMessageUnread} from "../../api/message";

export default {
  props: ['isShowMessage'],
  data() {
    return {
      activeName: 'unRead',
      unReadLoading: false,
      unReadList: [],
      unReadLabel: '',

      readLoading: false,
      readList: [],
      readLabel: '',
      color: 'black',

      unReadIds: [],
      readIds: [],
      popoverVisible: false
    }
  },
  watch: {
    unReadList(newValue) {
      const routes = this.$router.options.routes;
      const indexRoute = routes.find(route => route.redirect === 'index_zt');
      if (indexRoute != undefined) {
        // 当unReadList.length > 0时，自动显示弹出框
        if (newValue.length > 0) {
          this.popoverVisible = true;
        }
      }
    },
  },
  created() {
    // console.log(this.isShowMessage,"=-=-=-=-=-=---------------")
    if(this.isShowMessage == true) {
      updateApproveNoticeData().then(res=>{
        this.getUnRead()
        this.getRead()
      })
      setInterval(() => {
        getMessageUnread().then(res=>{
          if(res.data > 0) {
            this.color = 'red'
          } else {
            this.color = 'black'
          }
        })
      }, 5000);
    }
  },
  beforeDestroy(){
    clearTimeout();
  },
  beforeDestroy() {
    // 在组件销毁前移除全局点击事件监听
    document.removeEventListener('click', this.handleGlobalClick);
  },
  methods: {
    handlePopoverShow() {
      this.getUnRead();
      document.addEventListener('click', this.handleGlobalClick);
    },
    handleGlobalClick(event) {
      const popover = this.$refs.popover.$el; // 修正此行
      if (!popover.contains(event.target)) {
        this.popoverVisible = false;
      }
    },
    handleClick(tab, event) {
      if(tab.name == 'unRead') {
        this.getUnRead()
      } else {
        this.getRead()
      }
    },
    // 获取未读消息列表
    getUnRead() {
      this.form = {
        isRead: 0
      }
      getMessageList(this.form).then(response=>{
        if(response.total > 0) {
          this.color = 'red'
          this.unReadLabel = '未读消息('+response.total+')'
        } else {
          this.color = 'black'
          this.unReadLabel = '未读消息'
        }
        this.unReadList = response.rows
      })
    },
    handleUnReadSelection(selection) {
      this.unReadIds = selection.map(item => item.id);
    },
    // 标记已读
    handleSetRead() {
      if(this.unReadIds.length == 0) {
        this.$modal.msgWarning('请选择至少一条数据标记已读')
      } else {
        const id = this.unReadIds
        setRead(id).then(response=>{
          this.$modal.msgSuccess('标记已读成功')
          this.getUnRead()
          this.getRead()
        })
      }
    },
    // 全部已读
    handleAllRead() {
      if(this.unReadList.length == 0) {
        // this.$modal.msgWarning('请选择至少一条数据标记已读')
      } else {
        setAllRead().then(response=>{
          this.$modal.msgSuccess('全部标记已读成功')
          this.getUnRead()
          this.getRead()
        })
      }
    },
    // 获取已读消息列表
    getRead() {
      this.form = {
        isRead: 1
      }

      getMessageList(this.form).then(response=>{
        if(response.total > 0) {
          this.readLabel = '已读消息('+response.total+')'
        } else {
          this.readLabel = '已读消息'
        }
        this.readList = response.rows
      })
    },
    handleReadSelection(selection) {
      this.readIds = selection.map(item => item.id);
    },
    // 删除
    handleDelete() {
      if(this.readIds.length == 0) {
        this.$modal.msgWarning('请选择至少一条数据进行删除')
      } else {
        const id = this.readIds
        deleteMsg(id).then(response=>{
          this.$modal.msgSuccess('删除成功')
          this.getRead()
        })
      }
    },
    // 全部删除
    handleAllDelete() {
      if(this.readList.length == 0) {
        // this.$modal.msgWarning('请选择至少一条数据标记已读')
      } else {
        deleteAllMsg().then(response => {
          this.$modal.msgSuccess('全部删除成功')
          this.getRead()
        });
      }
    },
    rowClick(row) {
      console.log(row,"sdklfjksdljkl")
      //待办
      if (row.type == '3' && row.recordId != undefined) {
        this.$router.push({
          path: '/task/task',
          query: {
            taskId: row.recordId
          },
        });

      }
      //我的订阅
      if (row.type == '1') {
        this.$router.push({
          path: '/archiveBorrow/yqdy',
        });

      }

       //年检上报
       if (row.type == '4') {
        this.$router.push({
          path: '/filesManage/supervision/materialReporting',
        });

      }
    }
  }

}
</script>

<style scoped>
.el-icon-bell {
  cursor: pointer;
  vertical-align: middle;
  font-size: 20px;
  color: #5a5e66;
  stroke-width: 3px;
  font-weight: bold;
}

.bell {
  position: relative;
}

.dot {
  content: '';
  position: absolute;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
